<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // this 指向  ===>  指向 可以理解为 等于 代表谁
        // this在定义的时候不能确定, 只有执行调用的时候才能确定.!!! 重要
        // 背下来!

        // 1. 全局作用域中 / 普通函数中 / 定时器里面  this 指向 window
        // 1.1 全局作用域
        console.log(this)  // window

        // 1.2 普通函数调用
        function fn() {
            console.log('大家吃早饭了嘛?')
            console.log(this) // window
        }
        fn()

        // 1.3 定时器里面
        setTimeout(function () {
            console.log(this)  // window
        }, 1000)

        // 2.1 方法调用中, 谁调用这个方法, this指向谁
        const obj = {
            name: '小平',
            age: 18,
            sayHi: function () {
                console.log(this)
            }
        }
        obj.sayHi()

        // 2.2 事件注册的时候, this指向被绑定的元素
        const btn = document.querySelector('button')
        btn.addEventListener('click', function (e) {
            console.log(this) // 绑定事件的元素
            console.log(e.target) // 触发事件的元素
            console.log(e.currentTarget) // 同this, 绑定事件的元素
        })

        console.log('-------------------------')

        // 3. 构造函数中, this 指向的是 构造函数的实例
        function Foo(name, age) {
            this.name = name
            this.age = age
            console.log(this)
        }
        const person1 = new Foo('小红', 19)
        const person2 = new Foo('小白', 18)
    </script>
</body>

</html>